<template>
    <div>
        <van-nav-bar v-if="!disabled" @click-left="backRoute" left-arrow  title="员工出差申请单"/>
        <div v-else style="height:10px"></div>
        <van-cell-group style="margin: 5px 0 15px 0">
            <van-field  required label="出差人：" v-model="myFormData.applyUserName" :border="borderStatus"/>

            <van-field  required label="部门：" v-model="myFormData.departName" :border="borderStatus"/>

            <van-field required  label="目的地：" v-model="myFormData.destination" :border="borderStatus"/>

            <van-field required label="项目名称：" v-model="myFormData.projectName" :border="borderStatus"/>
        </van-cell-group>

        <van-cell-group style="margin-top: 15px">
            <app-date
                    required
                    v-model="myFormData.departureTime"
                    label="出发时间："
                    placeholder="请选择出差开始时间"
                    from-now>
            </app-date>

            <app-date
                    required
                    v-model="myFormData.plannedReturnTime"
                    class="noWrap"
                    label="计划返回时间："
                    placeholder="请选择计划返回时间"
                    from-now>
            </app-date>

            <app-date
                    required
                    v-model="myFormData.actualReturnTime"
                    class="noWrap"
                    label="实际返回时间："
                    placeholder="请选择出差实际返回时间"
                    from-now>
            </app-date>

            <van-field label="出差天数：" readonly v-model="dayNum" placeholder="请输入出差天数" :border="borderStatus"/>

            <app-select
                    v-model="myFormData.flag"
                    label="经费支出："
                    placeholder="请选择出差经费支出"
                    :border="borderStatus"
                    :dict="flagList">
            </app-select>

        <van-field required label="出发地：" v-model="myFormData.departAddress" placeholder="请输入出发地" :border="borderStatus"/>

            <app-select
                    v-model="myFormData.flagTravelTool"
                    label="出行工具："
                    placeholder="请选择出行工具"
                    :border="borderStatus"
                    :dict="flagTravelToolList">
            </app-select>

        <van-field
                :class="'cust-textarea73'"
                label="任务及事由："
                v-model="myFormData.reason"
                type="textarea"
                placeholder="请输入出差任务及事由"
                autosize>
        </van-field>
        </van-cell-group>

        <van-cell-group style="margin-top: 15px">
            <van-field
                    label="部门领导审核："
                    v-model="myFormData.departLeaderAudit"
                    class="noWrap"
                    placeholder="请输入部门领导审核"
                    :border="borderStatus">
            </van-field>

            <van-field
                    label="财务审核："
                    v-model="myFormData.financeAudit"
                    placeholder="请输入财务审核"
                    :border="borderStatus">
            </van-field>

            <van-field
                    label="出纳放款："
                    v-model="myFormData.cashierLoanAmount"
                    placeholder="请输入出纳放款"
                    :border="borderStatus">
            </van-field>

            <van-field
                    label="总经理审核："
                    v-model="myFormData.managerAudit"
                    placeholder="请输入总经理审核"
                    :border="borderStatus">

            </van-field>
        </van-cell-group>

        <div style="width: 100%;text-align: center;padding-top:15px " v-if="!disabled">
            <van-button

                    block
                    type="info"
                    style="width: 99%;margin: 0 auto;font-size:18px"
                    @click="onSubmit"
                    :loading="loading">
                提  交
            </van-button>
        </div>

    </div>
</template>

<script>
    const flag_category_list = ['预支借款','个人垫付'];
    const tool_category_list = ['客车','火车','飞机'];

    import AppDate from '@/components/AppDate'
    import appSelect from '@/components/appSelect'
    import { postAction,getAction } from '@/api'

    export default {
        name: "businesStrip",
        props: {
            formData: {
                type: Object,
                default: () => {
                },
                required: false
            }
        },
        components: {
            AppDate, appSelect
        },
        data() {
            return {
                borderStatus: true,
                datePickerStatus: false,
                datePickerFlag: '',
                minDate: new Date(),
                selectStatus: false,

                myFormData: {
                    applyUserName: '',
                    departName: '维普科技',
                    destination: '',
                    projectName: '',
                    departAddress: '',
                    flag: '',
                    departureTime:'',
                    plannedReturnTime:'',
                    actualReturnTime:'',
                    flagTravelTool: '',
                    reason: '',
                    departLeaderAudit: '',
                    financeAudit: '',
                    cashierLoanAmount: '',
                    managerAudit: '',
                    dayNum:''
                },
                loading: false
            }
        },
        created() {
            this.clearForm();
            this.initFormData();
        },
        computed: {
            applyusername() {
                return this.$store.getters.applyusername
            },
            dayNum(){
                if(this.myFormData.dayNum){
                  return this.myFormData.dayNum + '天';
                }
                return this.getDateDiff()+ '天';
            },
            flagList() {
                let flagArr = [];
                for (let i = 0; i < flag_category_list.length; i++) {
                    flagArr.push({
                        text: flag_category_list[i],
                        value: (i + 1) + ''
                    })
                }
                return flagArr
            },
            flagTravelToolList() {
                let toolArr = [];
                for (let i = 0; i < tool_category_list.length; i++) {
                    toolArr.push({
                        text: tool_category_list[i],
                        value: (i + 1) + ''
                    })
                }
                return toolArr
            },

            disabled() {
                if (!this.formData) {
                    return false;
                }
                if (this.formData.disabled === true) {
                    return true
                } else {
                    return false
                }
            }
        },

        methods: {
            getDateDiff(){
                if(!this.myFormData.departureTime || !this.myFormData.actualReturnTime){
                    return 0;
                }
                //时间差的毫秒数
                let dateDiff = new Date(this.myFormData.actualReturnTime).getTime() - new Date(this.myFormData.departureTime).getTime();
                //计算出相差天数
                return Math.ceil(dateDiff / (24 * 3600 * 1000));
            },
            onSubmit() {
                let myForm = this.myFormData;
                if(!myForm.applyUserName || myForm.applyUserName.length==0){
                    this.$toast('请输入出差人');
                    return false
                }
                if(!myForm.departName || myForm.departName.length==0){
                    this.$toast('请输入部门');
                    return false
                }
                if(!myForm.destination || myForm.destination.length==0){
                    this.$toast('请输入目的地');
                    return false
                }
                if(!myForm.projectName || myForm.projectName.length==0){
                    this.$toast('请输入项目名称');
                    return false
                }
                if(!myForm.departureTime || myForm.departureTime.length==0){
                    this.$toast('请选择出发时间');
                    return false
                }
                if(!myForm.plannedReturnTime|| myForm.plannedReturnTime.length==0){
                    this.$toast('请选择计划返回时间');
                    return false
                }
                if(!myForm.actualReturnTime || myForm.actualReturnTime.length==0){
                    this.$toast('请选择实际返回时间');
                    return false
                }
                if(myForm.actualReturnTime == myForm.departureTime){
                    this.$toast('请重新选择实际返回时间');
                    return false
                }
                if(!myForm.departAddress || myForm.departAddress.length==0){
                    this.$toast('请输入出发地');
                    return false
                }
                this.loading = true;
                postAction('/joa/joaBusinesStrip/add',myForm).then(res=>{
                    console.log('submit back', res);
                    // this.$toast(res.message);
                    if (res.success===true) {
                        this.startProcess(res.result.id);
                    }else{
                        this.loading = false
                    }
                }).catch(()=>{
                    this.loading = false
                });
            },
            startProcess(id){
                // var that = this;
                const url = '/process/extActProcess/startMutilProcess';
                const flow_code = 'joa_biz_trip_01';
                const param = {
                    flowCode:flow_code,
                    id:id,
                    formUrl:"modules/extbpm/joa/modules/JoaBusinesStripForm",
                    formUrlMobile:"applyform/businesStrip"
                };
                postAction(url,param).then((res)=>{
                    console.log("流程提交完成",res)
                    // that.$toast(res.message);
                    if(res.success){
                        // 流程发起成功 跳转详情页面
                        this.$router.push({
                            name: "flowDetail",
                            params: {
                                instanceId: res.result,
                                successed:0
                            }

                        })
                    }
                }).finally(()=>{
                    this.loading = false
                });
            },

            clearForm(){
                this.loading = false
                this.myFormData = {
                    applyUserName: this.applyusername,
                    departName: '',
                    destination: '',
                    projectName: '',
                    departAddress: '',
                    departureTime:'',
                    plannedReturnTime:'',
                    actualReturnTime:'',
                    flag: '',
                    flagTravelTool: '',
                    reason: '',
                    departLeaderAudit: '',
                    financeAudit: '',
                    cashierLoanAmount: '',
                    managerAudit: '',
                    dayNum:''
                }
            },
            initFormData(){
                if(this.formData && this.formData.disabled){
                    let dataId = this.formData.dataId;
                    let url = '/joa/joaBusinesStrip/queryById'
                    getAction(url,{id:dataId}).then((res)=>{
                        if(res.success){
                            console.log("表单数据",res);
                            this.myFormData=res.result
                        }
                    })
                }
            },
            backRoute(){
                this.$router.go(-1);//返回上一层
            },
        }
    }
</script>

<style>
    .cust-textarea73 textarea{height:72px !important;}
    .noWrap{white-space:nowrap;}
</style>
